<template>
  <div>测试后端服务一</div>
  <div style="display: flex">
    <el-input v-model="email_info.email"></el-input>
    <el-button @click="sendEmail">发送邮件</el-button>
  </div>
  <hr />
  <div>
    <img @click="getImgCode" :src="imgcode.dataurl" alt="" />
  </div>

  <hr />
  <div style="display: flex">
    <el-input v-model="py"></el-input>
    <el-button @click="getPy">获取拼音</el-button>
  </div>
  {{ result }}
  
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElInput, ElButton, ElMessageBox } from 'element-plus'
import { ApiService } from '../../api/ApiService'
import { TeachService } from '../../api/TeachService'

const email_info = ref({
  email: '',
  code: '',
})

const imgcode = ref({
  dataurl: '',
  code: '',
  token: '',
})

const getImgCode = () => {
  ApiService.get('/tools/imagecode', {}, (data: any) => {
    if (data.success) {
      imgcode.value = data.data
    } else {
      ElMessageBox.alert(data.message)
    }
  })
}

getImgCode()

const sendEmail = () => {
  ApiService.post('/tools/sendMailCode', email_info.value, (data: any) => {
    ElMessageBox.alert(data.message)
  })
}

const py = ref('')
const result = ref('')
const getPy = () => {
  TeachService.post(
    '/api/pinyin',
    {
      info: py.value,
    },
    (data: any) => {
      result.value = data.message
    },
  )
}
</script>

<style lang="scss" scoped></style>
